<template>
    <el-aside width="200px">
        <el-menu
            default-active="1"
            @select="handleSelect"
            background-color="#eee"
            text-color="#000"
            active-text-color="#57606f"
        >
            <el-menu-item
                :index="item.index"
                v-for="item in this.$store.state.asideData"
                :key="item.index"
                ref="menuItem"
            >
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.value }}</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script>
export default {
    methods: {
        handleSelect(key) {
            const menuItemText = this.$refs.menuItem[key - 1].$el.innerText
            this.$store.commit('setMainData', menuItemText)
        },
    },
    mounted() {},
}
</script>

<style lang="scss">
aside ul {
    height: 100%;
}
@media screen and (max-width: 768px) {
    .main aside {
        display: none;
        &.active {
            display: block;
            // position: absolute;
            // top: 60px;
            // left: 0;
        }
    }
}
</style>
